Bootstrap Custom 3D Panel Heading

Bootstrap panel is one of the widely used components of the Bootstrap framework. Most of the time a web developer used them when they require to place their contents in the box for better presentation. Although Bootstrap extremely simplifies your websites front end designing tasks it is not elegant and we need to customise it for a better appearance.

In this tutorial, I will show you how to customise Bootstrap panel heading in order to give a better look and feel. I used the before and after selector of CSS and some animation to make a wrapper around the panel heading. The final output image is given below.

Bootstrap Custom 3D Panel Heading Demo - ShareurCodes

Let's start coding,

The CSS code is given below.

<style>
  .outer{
      padding: 2em 1em;
      box-shadow: 5px 5px 5px #d9d9d9;
  }

  .headerbar{
      background: #640326 !important;
      color: #ffffff !important;
      position: relative;
      margin-bottom: 1.5em;
      margin-right: -2.5em;
      margin-left: -2.5em;
      box-shadow: 5px 5px 5px #d9d9d9;
  }
  .headerbar:before{
      content: "";
      position: absolute;
      border-bottom: 1.5em solid #333;
      border-left: 1.5em solid transparent;
      left: 0;
      top: -1.5em;
      
  }
  .headerbar:after{
      content: "";
      position: absolute;
      border-top: 1.5em solid #333;
      border-right: 1.5em solid transparent;
      right: 0;
      bottom: -1.5em;
  }

  .headerbar:hover {
    transform:scale(1,1.1);
  }
  </style>

I will explain the code later in this tutorial.

Now the Bootstrap container codes.

<div class="container">
  <h1 class="text-center" style="padding: 50px 0px; color: #640326; "><u>Bootstrap Custom 3D Panel Heading</u></h1>
  <div class="row">
    <div class="col-md-4 col-md-offset-4" >
      <div class="panel panel-default outer">
        <div class="panel-heading headerbar">
          <h3 class="text-center">Panel Heading</h3>
        </div>
        <div class="panel-body text-justify">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
       </div>
      </div>
    </div>
  </div>
</div>

The above code does not require any explanation. It is just a basic bootstrap grid system with the bootstrap panel. The complete code of this page is given below.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Custom 3D Panel Heading Demo - ShareurCodes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
  .outer{
      padding: 2em 1em;
      box-shadow: 5px 5px 5px #d9d9d9;
  }

  .headerbar{
      background: #640326 !important;
      color: #ffffff !important;
      position: relative;
      margin-bottom: 1.5em;
      margin-right: -2.5em;
      margin-left: -2.5em;
      box-shadow: 5px 5px 5px #d9d9d9;
  }
  .headerbar:before{
      content: "";
      position: absolute;
      border-bottom: 1.5em solid #333;
      border-left: 1.5em solid transparent;
      left: 0;
      top: -1.5em;
      
  }
  .headerbar:after{
      content: "";
      position: absolute;
      border-top: 1.5em solid #333;
      border-right: 1.5em solid transparent;
      right: 0;
      bottom: -1.5em;
  }

  .headerbar:hover {
    transform:scale(1,1.1);
  }
  </style>

</head>
<body>

<div class="container">
  <h1 class="text-center" style="padding: 50px 0px; color: #640326; "><u>Bootstrap Custom 3D Panel Heading</u></h1>
  <div class="row">
    <div class="col-md-4 col-md-offset-4" >
      <div class="panel panel-default outer">
        <div class="panel-heading headerbar">
          <h3 class="text-center">Panel Heading</h3>
        </div>
        <div class="panel-body text-justify">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
       </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Code Explanation

Now let's take a brief look at the main CSS properties that gives the wrapper effect.

1) CSS ::before Selector

The CSS before selector helps us to insert something before the div container. In this case, we add a small black triangular border before our panel heading on top left side of header container. Minus value of top and zero value of left is also required for perfect alignment.

2) CSS ::after Selector

The CSS after selector helps us to insert something after the div container. In this case, we add a small black triangular border after our panel heading on bottom right side of header container. Minus value of bottom and zero value of the right is also required for perfect alignment.

3) Minus Values for Margins

I used the minus values for both margin left and margin right to extend the header beyond the parent panel container width.

4) Position Relative and Absolute

The parent tag must always have the relative position. The child ( before and after selectors ) must have the absolute position. The absolute position helps us to float above the parent tag.

5) CSS content Property

The CSS content can only be used with the after and before selectors. It is used to generate contents inside an element.